<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .aui-list .aui-list-item-label,
        .aui-list .aui-list-item-label-icon {
            width: 100%;
        }

        .aui-switch:checked {
            border-color: #fd5454;
            background-color: #fd5454;
        }

        .aui-list .aui-list-item-input {
            text-align: right;
        }

        .aui-list .aui-list-item-input select {
            width: auto;
            display: inline-block;
        }

        .aui-radio:checked,
        .aui-radio.aui-checked,
        .aui-checkbox:checked,
        .aui-checkbox.aui-checked {
            background-color: #fd5454;
            border: solid 1px #fd5454;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" style="padding-top:25px">
        <a class="aui-pull-left" onclick="api.closeWin();">返回</a>
        <div class="aui-title">设置旺旺币</div>
    </header>
    <div class="aui-content aui-margin-b-15 vue">
        <div class="loading" v-if="loading"></div>
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">商家营销比例</div>
                    <div class="aui-list-item-input">
                        <select v-model="info.ratio">
                          <option :value="item" v-for="item in rate">{{item}}%</option>
                      </select>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">平台补顾客旺币</div>
                    <div class="aui-list-item-input">{{info.ratio*2.5}}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">旺旺币获取条件</div>
                    <div class="aui-list-item-input">0元</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">营业状态</div>
                    <div class="aui-list-item-input">
                        <select v-model="info.business_status">
                          <option value="1">营业中</option>
                          <option value="2">休息中</option>
                        </select>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">自动通知</div>
                    <div class="aui-list-item-input">
                        <select v-model="info.msg_status">
                          <option value="1">自动</option>
                          <option value="2">手动</option>
                        </select>
                    </div>
                </div>
            </li>
            <div style="font-size:0.6rem;color:#505050;padding:1rem 1rem 0 1rem">
                <label>
                  <input class="aui-checkbox" type="checkbox" value="1" v-model="agreement" style="width:0.8rem;height:0.8rem;vertical-align:middle;">
                  <span style="vertical-align:middle;">我已阅读并同意</span>
                </label>
                <span style="vertical-align:middle;">《<span style="color:#ff2600" @click="openAgreement">客旺旺商家活动协议</span>》</span>
            </div>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
                    <div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm" style="background-color:#fd5454 !important;" @click="submit()">保存</div>
                </div>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/base64.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript">
        apiready = function() {
            var user = app.getUser();
            var Ve = new Vue({
                el: '.vue',
                data: {
                    loading: true,
                    rate: [10, 15, 20, 25, 30, 35, 40],
                    info: {},
                    agreement: false
                },
                methods: {
                    getInfo: function() {
                        app.request.post('/myhome/wwbSet', {
                            business_id: user.business_id,
                            signature: app.sign(user.business_id)
                        }, {}, function(res) {
                            // console.log(JSON.stringify(res))
                            if (res.code == 1) {
                                Ve.info = res.data
                            } else {
                                app.error(res.msg)
                            }
                            app.loadingFinish(Ve)
                        })
                    },
                    openAgreement: function() {
                        api.openWin({
                            name: 'agreement',
                            url: 'agreement.html',
                            animation: {
                                type: 'movein',
                                subType: 'from_bottom'
                            }
                        });
                    },
                    submit: function() {
                        if (!this.agreement) {
                            app.error('您未同意协议')
                            return false
                        } else {
                            app.request.post('/myhome/wwbSetUpdate', {
                                business_id: user.business_id,
                                business_status: this.info.business_status,
                                ratio: this.info.ratio,
                                gold: (this.info.ratio * 2.5),
                                msg_status: this.info.msg_status,
                                signature: app.sign(user.business_id)
                            }, {}, function(res) {
                                if (res.code == 1) {
                                    api.alert({
                                        title: '提示',
                                        msg: '修改成功',
                                    });
                                } else {
                                    app.error(res.msg)
                                }
                            })
                        }
                    }
                },
                watch: {
                    info: {
                        handler: function(val, oldVal) {
                            this.info.gold = val.ratio * 2.5
                        },
                        deep: true
                    },
                },
                created: function() {
                    this.getInfo()
                }
            })
        }

        function submit() {
            api.openWin({
                name: 'bill_result',
                url: 'bill_result.html',
                animation: {
                    type: 'movein',
                    subType: 'from_bottom'
                }
            });
        }
    </script>
</body>

</html>
